<extend name="Public/base"/>
<block name="body">
    <div class="portlet box blue">
        <div class="portlet-title">
            <div class="caption"><i class="fa fa-reorder"></i>班级课程安排</div>
            <div class="tools">
                <a href="" class="collapse"></a><a href="" class="remove"></a>
            </div>
        </div>
        <div class="portlet-body">

            <style>
                th,td{ text-align: center; position: relative;}
            </style>
            <form class="from-value" action="{:U('')}" method="post">
            <div class="col-md-9" id="printArea">
                <div class="table-responsive" id="containment-wrapper">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <volist name="head_list" id="heads">
                                <th>{$heads.title}</th>
                            </volist>
                        </tr>
                        </thead>
                    </table>

                    <table class="table table-bordered">
                        <tbody>
                           <volist name="_list" id="data">
                        <tr>
                            <volist name="data" id="vos">
                            <td>{$vos.title}</td> <input type="hidden"  value="{$vos.scid}">
                            </volist>
                        </tr>
                            </volist>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="col-md-3 text-right">


                <select name="sid" class="form-control margin-bottom-10">
                    <option value="">请选择学期</option>
                    <volist name="s_data" id="vo" >
                        <option value="{$vo.sid}">{$vo.title}</option>
                    </volist>
                </select>

                <select  name="gid" onchange="grade_fun(this.value)" class="form-control margin-bottom-10">
                    <option>请选择年级</option>
                    <volist name="grade_data" id="vo" >
                        <option value="{$vo.gid}">{$vo.class_name}</option>
                    </volist>
                </select>

                <select name="classid" class="form-control margin-bottom-10">
                    <option>请选择班级</option>

                </select>

                <select class="form-control margin-bottom-10" id="course" onchange="courseChange(this,this.value);">
                    <option value="">请选择科目</option>
                    <volist name="sub_list" id="vo" >
                        <option value="{$vo.sid}">{$vo.subject_name}</option>
                    </volist>
                </select>
                <h6 class="text-left text-info"><i class="fa fa-lightbulb-o"></i> 请在下拉选项中选择教师信息，然后拖动标签完成操作</h6>
                <select class="form-control margin-bottom-10" id="teacher" onchange="teacherChange(this,this.value);">
                    <option value="">请选择老师</option>
                </select>
                <div id="draggabled">
                    <span class="label label-success courses">&nbsp;</span>
                    <span class="label label-info teachers">&nbsp;</span>
                </div>
            </div>
            <div class="clearfix"></div>
                <input type="submit" class="btn green btn-block margin-bottom-20 ajax-post" target-form="from-value" value="提交" />
                <input class="btn blue btn-block margin-bottom-10" value="打印" id="btnPrint" onclick="onprint()"/>

            </form>
        </div>
    </div>

</block>

<block name="script">

    <script src="__STATIC__/scripts/app.js"></script>
    <!--<script src="__STATIC__/scripts/table-managed.js"></script>-->
    <script>
        function  getData(tid,scid,sid) {
            var tarr='';
            $.ajax({
                url:"{:U('Public/teacher_busy')}",
                data:{teacherid:tid,scid:scid,sid:sid},
                type:'post',
                async: false,
                dataType:'json',
                success:function (data) {
                    console.log(data);
                    if(data.status == 'error'){
                        tarr+= data.info;
                    }
                }
            })
            return tarr;
        }



        var scid_array=[];


        jQuery(document).ready(function() {
            App.init();
            highlight_subnav('{:U('Courseware/classwork')}');

            $('.teachers').css('cursor','pointer');

            //jQuery-ui 拖拽方法初始化
            $("#draggabled").draggable({
                appendTo: "#containment-wrapper",
                helper: "clone"
            });
            $("td").droppable({
                activeClass: "ui-state-default",
                hoverClass: "ui-state-hover",
                accept: ":not(.ui-sortable-helper)",
                drop: function( event, ui ) {
                    //科目值
                    var course=$("#course").val();
                    //老师id
                    var teacher=$("#teacher").val();
                    //课时格子值
                    var scid=$(this).next('input').val();
                    var sid=$("[name='sid']").val();//学期id
                    if(sid==''){
                        layer.alert('请选择学期');
                        return false;
                    }else if(course == ''){
                        layer.alert('请选择科目');
                        return false;
                    }else if(teacher == ''){
                        layer.alert('请选择老师');
                        return false
                    }
                    var get_data=getData(teacher,scid,sid);
                    if( get_data !== ''){
                        layer.alert(get_data);
                        return false;
                    }



                    var scid=$(this).next('input').attr('name','scid[]');
                    $(this).append('<span class="label label-success course subs">' +
                            $('#course').find('option:checked').text()+
                            '<i class="fa fa-times"></i></span>' +
                            '<span class="label label-info teacher subs">' +
                            $('#teacher').find('option:checked').text()+
                            '<i class="fa fa-times"></i></span>' +
                            '<input type="hidden" name="subject_id[]" class="hidden subs" value="'+course+'"/>' +
                            '<input class="hidden subs" name="teacher_id[]" value="'+teacher+'"/>');

                    $(this).find('.teacher').css({'position':'absolute','top':'5px','right':'2px'});
                    $(this).find('.course').css({'position':'absolute','top':'5px','left':'2px'});


                }
            }).sortable({
                items: "li:not(.placeholder)",
                sort: function() {
                    // 获取由 droppable 与 sortable 交互而加入的条目
                    $( this ).removeClass( "ui-state-default" );

                }
            });

        });

        $('body').on('click','.subs',function(){

            $(this).parent().next('input').attr('name','');

            $(this).parent().find(".subs").remove();
        })

        function printHtml(html) {
            var bodyHtml = document.body.innerHTML;
            document.body.innerHTML = html;
            window.print();
            document.body.innerHTML = bodyHtml;
        }
        function onprint() {
            //打印时去掉“x”符号
//        $('.fa-times').css('display','none');

            var html = $("#printArea").html();

            printHtml(html);
        }
        //根据年级id获取班级信息
        function grade_fun(gid) {
            var txt="<option value=''>请选择班级</option>";
            $.post("{:U('Public/classinfo')}",{gid:gid},function (data) {
                if(data !== ''){
                    $.each(data,function (n,i) {
                        txt+="<option value='"+i.id+"'>"+i.grade_name+"</option>";
                    });
                    $("[name='classid']").html(txt);

                }
            })
        }

        function teacherChange(that,uid){
            $('.teachers').text($('#teacher').find('option:checked').text());
        }
        function courseChange(that,sid){
            $('.courses').text($('#course').find('option:checked').text());

            $.post("{:U('Public/teacher_data')}",{sid:sid},function(data){
                var txts="<option value=''>请选择</option>";
                if(data !== null){
                    $.each(data,function(k,v){
                        txts+=" <option value='"+ v.uid+"'>"+ v.nickname+"</option>"
                    });
                    $("#teacher").html(txts);
                }
            })


        }

    </script>
</block>